<template>
    <div>
        <h2>会员列表</h2>
        <div>
            手机号：<input type="text" v-model="state.phone" />
            名称：<input type="text" v-model="state.username" />-

            <input type="button" value="查询" @click="getlist"  />
            <input type="button" value="批量删除" @click="delall" />
            <input type="button" value="导出" @click="Execl" />
        </div>
        <table class="table table-bordered " >
            <tr>
                <th><input type="checkbox" v-model="filge" @click="checkall" /></th>
                <th>会员ID</th>
                <th>会员名称</th>
                <th>手机号</th>
                <th>身份证号</th>
                <th>积分</th>
                <th>余额</th>
                <th>图片</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in list">
                <th><input type="checkbox" v-model="arrids" :value="item.id" @change="checkone" /></th>
                <th>{{ item.id }}</th>
                <th>{{ item.name }}</th>
                <th>{{ item.phone }}</th>
                <th>{{ item.idCard }}</th>
                <th>{{ item.integral }}</th>
                <th>{{ item.money }}</th>
                <th><img :src="item.photo" alt="" width="50" height="50" /></th>
                <th>{{ item.createTime.substring(0, 10) }}</th>
                <th>
                    <input type="button" value="删除" @click="del(item.id)" />
                    <input type="button" value="修改" @click="updMember(item.id)" />
                    <input type="button" value="修改积分" @click="updJiFen(item.id)" />
                    <input type="button" value="充值" @click="yuechongzhi(item.id)" />
                    <input type="button" value="详情" />
                </th>
            </tr>
        </table>
        <div>
            <span>总条数:<b style="color: red;">{{ totalcount }}</b></span>
            <span>总页数:<b style="color: red;">{{ totalpage }}</b></span>
            <span>当前第<b style="color: red;">{{ state.index }}</b>/<b style="color: red;">{{ totalpage }}</b></span>
            <input type="button" value="首页" @click="page('1')" class="btn btn-primary" />
            <input type="button" value="上一页" @click="page('2')" class="btn btn-primary" />
            <input type="button" value="下一页" @click="page('3')" class="btn btn-primary" />
            <input type="button" value="尾页" @click="page('4')" class="btn btn-primary" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
const router = useRouter()
let data: any = reactive({
    state: {
        phone: '',
        username: '',
        index: 1,
        size: 2,

    },
    list: [],
    totalpage: 0,
    totalcount: 0,
    filge: false,
    arrids: []

})
let { state, list, totalpage, totalcount, filge, arrids } = toRefs(data);
onMounted(() => {
    getlist()
})

//全选全不选
const checkall = () => {
    filge.value = !filge.value
    if (filge.value == true) {
        arrids.value = list.value.map((item: any) => {
            return item.id
        })
    }
    else {
        arrids.value = []
    }
}
//反选
const checkone = () => {
    if (arrids.value.length == list.value.length) {
        filge.value = true
    }
    else {
        filge.value = false
    }
}
//单删
const del = (id:any) => {
    let t=confirm("是否删除")
    if(t==true){
        let obj = {
        arrids: id.toString()
    }
    axios({
        url: '/api/Member/DelAll',
        method: 'delete',
        params: obj
    })
        .then(res => {
            console.log(res);
            if (res.data.data == 1) {
                alert("删除成功")
                
                getlist()
            }
            else {
                alert("删除失败")
            }
        })
        .catch(err => {
            console.log(err);
        })
    }

    
}
//批删
const delall = () => {
    let t=confirm("是否删除")
    if(t==true){
        let obj = {
        arrids: arrids.value.toString()
    }
    axios({
        url: '/api/Member/DelAll',
        method: 'delete',
        params: obj
    })
        .then(res => {
            console.log(res);
            if (res.data.data == 1) {
                alert("删除成功")
                filge.value=false
                getlist()
            }
            else {
                alert("删除失败")
            }
        })
        .catch(err => {
            console.log(err);
        })
    }

    
}


const page = (res: any) => {
    switch (res) {
        case "1":
            if (state.value.index == 1) {
                alert("已经是第一页了")
                return;
            }
            state.value.index = 1;
            break;
        case "2":
            if (state.value.index == 1) {
                alert("已经是第一页了")
                return;
            }
            state.value.index--;
            break;
        case "3":
            if (state.value.index == totalpage.value) {
                alert("已经是最后一页了")
                return;
            }
            state.value.index++;
            break;
        case "4":
            if (state.value.index == totalpage.value) {
                alert("已经是最后一页了")
                return;
            }
            state.value.index = totalpage.value;
            break;
        case res:
            if (res == "") {
                alert("不能为空")
                return;
            }
            if (isNaN(res) == true) {
                alert("请输入数字")
                return;
            }
            if (res < 1 || res > totalpage.value) {
                alert("页码只能为1到" + totalpage.value + "之间的数字")
                return;
            }


            state.value.index = res;
            break;
    }
    getlist()
}
const getlist = () => {
    let obj = {
        phone: state.value.phone,
        username: state.value.username,
        index: state.value.index,
        size: state.value.size,
    }
    axios({
        url: '/api/Member/GetMembers',
        method: 'get',
        params: obj
    })
        .then(res => {
            console.log(res);
            list.value = res.data.data,
                totalpage.value = res.data.totalpage,
                totalcount.value = res.data.totalcount
        })
        .catch(err => {
            console.log(err);
        })
}
//修改积分
const updJiFen = (id: any) => {
    router.push({
        path: '/jifen',
        query: {
            id: id
        }
    })
}
//充值
const yuechongzhi = (id: any) => {
    router.push({
        path: '/yue',
        query: {
            id: id
        }
    })
}
//修改
const updMember = (id: any) => {
    router.push({
        path: '/upd',
        query: {
            id: id
        }
    })
}

const Execl = () => {
    location.href = "https://localhost:7096/api/Member/GetMemberExecl?index=1&size=2"
}

</script>

<style scoped></style>